<template>
  <div id="tree"
    ><br />
    <p>接口分类 <img src="@/assets/images/加.png" @click="addTreeOne()" /> </p>
    <!-- <a-input-search v-model:value="searchValue" style="width: 240px; margin: 10px" placeholder="Search" /> -->
    <a-directory-tree v-model:selectedKeys="selectedKeys" :tree-data="treeData" style="font-size: 15px; background-color: #f2f2f2" @select="onSelect">
      <template #title="{ key: record, dirName, dirId, dirParents }">
        <a-dropdown :trigger="['contextmenu']">
          <span
            >{{ dirName }}
            <a-popover>
              <template #content>
                <p @click="addTree(dirParents)">新增</p>
                <p @click="ediTree(dirId)">编辑</p>
                <a-popconfirm title="你确定删除！" ok-text="Yes" cancel-text="No" @confirm="delTree(dirId)" @cancel="cancel">
                  <p>删除</p>
                </a-popconfirm>
              </template>
              <i>...</i>
            </a-popover>
          </span>
        </a-dropdown>
      </template>
    </a-directory-tree>
  </div>
  <!-- 接口分类弹窗 -->
  <tree-module
    ref="treeLowerModules"
    :add-code-table="addCodeTable"
    :dialog-statue="dialogStatue"
    :data-name="dataName"
    :data-detil="datad"
    @add-successed="addSuccessed"
    @edit-successed="handleEditSuccessed"
    @change-show="ChangeShowTree"
  ></tree-module>
</template>
<script lang="ts" setup>
  import { DataTree } from '../type/index';
  import treeModule from './treeModule.vue';
  import { message } from 'ant-design-vue';
  import { getinterFace, deleteDir } from '@/api/test/interFace';
  import { Ref, defineEmits } from 'vue';

  const treeData: Ref<DataTree[]> = ref([]);
  const selectedKeys = ref<string[]>();
  let dataName = ref<string>(''); //名称数据用于弹窗验证命名重复
  //分类接口
  const anlond = async () => {
    const resgetinterFace = await getinterFace();
    treeData.value = resgetinterFace.data;

    if (dataName.value == '') {
      dataName.value = String(
        treeData.value.map((item: DataTree) => {
          return item.dirName;
        }),
      );
    }
  };
  anlond();

  // 使用defineEmits创建名称，接受一个数组
  const emit = defineEmits(['clickChild', 'changeShow']);
  //点击选中目录分类
  const datad = ref();
  let data = reactive({});
  const onSelect = (dirId: number, datas: Object, event: any) => {
    // console.log('Trigger Select', dirId, '--', datas);
    data = datas.node;
    // console.log(data, ';;;;;;;;');
    //clickChild方法 返回选中数据data给父组件
    emit('clickChild', data);
    datad.value = datas.node.dataRef;
  };
  const addCodeTable = ref<boolean>(false);
  const dialogStatue = ref<string>('');
  //分类弹窗新增
  const addTree = (dirParents: number) => {
    addCodeTable.value = true;
    dialogStatue.value = 'add';
  };
  const addTreeOne = () => {
    addCodeTable.value = true;
    dialogStatue.value = 'addOne';
  };
  //编辑
  const ediTree = (dirId: number) => {
    addCodeTable.value = true;
    dialogStatue.value = 'edit';
  };
  //返回改变的数据渲染到页面上
  const handleEditSuccessed = (data: DataTree) => {
    treeData.value.forEach(item => {
      if (item.dirId == data.dirId) {
        item.dirName = data.dirName;
        // item.dirId = data.dirId;
      }
    });
  };
  //返回新增的数据
  const addSuccessed = (data: DataTree) => {
    if (dialogStatue.value == 'add') {
      datad.value.children.push(data);
    }
    if (dialogStatue.value == 'addOne') {
      treeData.value.push(data);
    }
  };

  //删除 splice
  const delTree = async (dirId: number) => {
    // datad.value = '';
    treeData.value = treeData.value.filter(item => item.dirId !== dirId);
    // treeData.value.forEach(item => {
    //   if (item.dirId == dirId) {
    //     treeData.value.splice(treeData.value.indexOf(item), 1);
    //     if (item.children) {
    //       item.children.forEach((i: DataTree) => {
    //         if (i.dirId == dirId) {
    //           item.children.splice(treeData.value.indexOf(i), 1);
    //         }
    //       });
    //     }
    //   }
    // });
    const resdeleteDir = deleteDir({ dirId });
    // location.reload(); //强制刷新

    // if (resdeleteDir.code == 100200) {
    //   message.success('删除成功！');
    // } else {
    //   message.error(resdeleteDir.msg);
    // }
    anlond();
  };
  const cancel = () => {
    message.error('Click on No');
  };

  const ChangeShowTree = (show: string) => {
    // 子组件向外触发父组件事件“关闭”弹窗
    if (show == 'tree') {
      addCodeTable.value = false;
    }
  };
</script>
<style lang="less" scoped>
  #tree {
    margin-top: 15px;
    margin-left: 10px;
    height: calc(100vh - 100px);
    background-color: #f2f2f2;

    p {
      font-size: 17px;
      font-weight: bolder;
      text-align: center;
      cursor: pointer;
    }

    img {
      width: 20px;
      cursor: pointer;
    }

    i {
      float: right;
      margin-right: 5px;
    }
  }
</style>
